<template>
	<view class="box">
		<view class="zhuce">
			<view @click="flag = true">手机号注册</view>/
			<view @click="flag = false">邮箱注册</view>
		</view>
		<uni-forms ref="form" :modelValue="phone" :rules="rules">
			<uni-forms-item label="用户昵称" name="username" required>
				<uni-easyinput type="text" v-model="phone.username" placeholder="请输入您的用户昵称" />
			</uni-forms-item>
			<uni-forms-item label="用户密码" name="password" required>
				<uni-easyinput type="password" v-model="phone.password" placeholder="请输入您的密码" />
			</uni-forms-item>
			<uni-forms-item label="确认密码" name="confirmPassword" required>
				<uni-easyinput type="password" v-model="phone.confirmPassword" placeholder="请再次输入您的密码" />
			</uni-forms-item>
			<view v-if="flag">
				<uni-forms-item label="手机号码" name="phone" required>
					<uni-easyinput type="text" v-model="phone.phone" placeholder="请输入您的手机号码" />
				</uni-forms-item>
				<uni-forms-item label="验证码" name="verifyCode" required>
					<uni-easyinput type="text" v-model="phone.verifyCode" placeholder="请输入验证码" />
					<button size="mini" @click="yanzm" :disabled="flag1" class="bt2">{{phoneyzm}}</button>
				</uni-forms-item>
				<button type="primary" class="but1" @click="submit">注册</button>
			</view>
			<view v-if="!flag">
					<uni-forms-item label="电子邮箱" name="phone" required>
						<uni-easyinput type="text" placeholder="请输入您的电子邮箱" />
					</uni-forms-item>
					<uni-forms-item label="验证码" name="verifyCode" required>
						<uni-easyinput type="text" placeholder="请输入验证码" />
						<button size="mini"  class="bt2">发送验证码</button>
					</uni-forms-item>
				<button type="primary" class="but1">注册</button>
			</view>
		</uni-forms>
		
	</view>
</template>

<script>
	import {
		send,
		registerByPhone
	} from "../../utils/api.js"
	export default {
		data() {
			return {
				flag: true,
				phoneyzm: '发送验证码',
				flag1: false,
				phone: {
					avatar: "",
					confirmPassword: "",
					email: "",
					password: "",
					phone: "",
					username: "",
					verifyCode: ""
				},
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}, ]

					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								minLength: 6,
								maxLength: 15,
								errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					confirmPassword: {
						rules: [{
							required: true,
							errorMessage: '请再次输入密码',
						}, {
							minLength: 6,
							maxLength: 15,
							errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
						}]
					},
					phone:{
						rules: [{
							required: true,
							errorMessage: '请输入手机号码',
						}, {
							minLength: 11,
							maxLength: 11,
							errorMessage: '密码长度在 {minLength}个字符',
						}]
					}
				}
			}
		},
		watch: {
			flag(newval) {
				console.log(1)
				this.phone = {
					avatar: "",
					confirmPassword: "",
					email: "",
					password: "",
					phone: "",
					username: "",
					verifyCode: ""
				}
			}
		},
		methods: {
			submit(form) {
				this.$refs.form.validate().then(async res => {
					console.log('表单数据信息：', res);
					const res1 = await registerByPhone(this.phone)
					console.log(res1)
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},

			async yanzm() {
				console.log(this.phone.phone)
				const res = await send(this.phone.phone)
				console.log(res)
				let s = 60
				this.flag1 = true
				const time = setInterval(() => {
					this.phoneyzm = `${--s}秒后重新发送`
					if (s <= 0) {
						clearInterval(time)
						this.phoneyzm = '发送验证码'
						this.flag1 = false
					}
				}, 1000)
			}
		}
	}
</script>

<style scoped>
	.box {
		background-color: #FFFFFF;
		height: 100vh;
		padding: 20px;
		box-sizing: border-box;
	}

	.zhuce {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.zhuce view {
		color: #007AFF;
		margin: 0 10px;
	}


	.but1 {
		margin-top: 30px;
	}
	.bt2{
		margin-left: 20px;
		width: 130px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	>>>.uni-forms-item__content{
		display: flex;
	}
</style>
